<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能监测系统 - 应急响应方案</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2563eb',
                        secondary: '#64748b'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        body {
            min-height: 1024px;
        }
        .chart-container {
            width: 100%;
            height: 300px;
        }
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="fixed top-0 left-0 w-full bg-white shadow-sm z-50" style="position: sticky;">
        <div class="container flex items-center justify-between h-16 px-6" style="margin-left: 50px;">
            <div class="flex items-center space-x-2">
                <span class="text-2xl font-['Pacifico'] text-primary">logo</span>
                <span class="text-xl font-medium">隧道监测系统</span>
            </div>
            <div class="flex items-center space-x-6">
                <button
                    class="flex items-center space-x-1 text-gray-600 hover:text-primary!rounded-button whitespace-nowrap">
                    <i class="fas fa-bell w-4 h-4 flex items-center justify-center"></i>
                    <span>通知</span>
                </button>
                <button
                    class="flex items-center space-x-1 text-gray-600 hover:text-primary!rounded-button whitespace-nowrap">
                    <i class="fas fa-cog w-4 h-4 flex items-center justify-center"></i>
                    <span>设置</span>
                </button>
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                        <i class="fas fa-user text-gray-600"></i>
                    </div>
                    <span class="text-gray-700">管理员</span>
                </div>
            </div>
        </div>
    </div>
    <div class="flex min-h-screen">
        <div class="w-48 min-h-[calc(100vh-64px)] bg-white shadow-sm pt-6" style="margin-left: 55px;">
            <div class="px-4 py-2">
                <div class="text-sm font-medium text-gray-400">主导航</div>
                <div class="mt-2 space-y-1">
                    <a style="line-height: 50px;" href="./index1.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-exclamation-triangle mr-2"></i>数据采集监测
                    </a>
                    <a style="line-height: 50px;" href="./index2.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-ambulance mr-2"></i>风险评估分析
                    </a>
                    <a style="line-height: 50px;" href="./index3.html"
                        class="w-full px-3 py-2 text-sm text-left text-primary bg-blue-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-chart-line mr-2"></i>应急响应方案
                    </a>
                    <a style="line-height: 50px;" href="./index4.html"
                        class="w-full px-3 py-2 text-sm text-left text-gray-700 hover:bg-gray-50 rounded-button whitespace-nowrap">
                        <i class="fas fa-clipboard-list mr-2"></i>监测维护记录
                    </a>
                </div>
            </div>
        </div>

        <main class="flex-1 p-8">
     

            <section class="mb-8">
                <div class="grid grid-cols-4 gap-6">
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">当前风险等级</h3>
                            <span class="px-3 py-1 text-sm font-medium bg-red-100 text-red-600 rounded-full">高风险</span>
                        </div>
                        <div class="text-3xl font-bold text-gray-900">Level 3</div>
                        <p class="mt-2 text-sm text-gray-500">较上周上升 15%</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">异常指标数</h3>
                            <i class="fas fa-exclamation-circle text-yellow-500"></i>
                        </div>
                        <div class="text-3xl font-bold text-gray-900">12</div>
                        <p class="mt-2 text-sm text-gray-500">24 小时内新增 3 个</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">待处理预警</h3>
                            <i class="fas fa-bell text-orange-500"></i>
                        </div>
                        <div class="text-3xl font-bold text-gray-900">8</div>
                        <p class="mt-2 text-sm text-gray-500">较昨日增加 2 个</p>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow-sm">
                        <div class="flex justify-between items-center mb-4">
                            <h3 class="text-lg font-medium text-gray-800">响应时效</h3>
                            <i class="fas fa-clock text-green-500"></i>
                        </div>
                        <div class="text-3xl font-bold text-gray-900">92%</div>
                        <p class="mt-2 text-sm text-gray-500">平均响应时间 15 分钟</p>
                    </div>
                </div>
            </section>

            <section class="grid grid-cols-2 gap-6 mb-8">
                <div class="bg-white p-6 rounded-lg shadow-sm">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="text-lg font-medium text-gray-800">风险趋势分析</h3>
                        <div class="flex space-x-2">
                            <button id="todayBtn" class="px-4 py-2 border border-gray-300 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50">
                                今天
                            </button>
                            <button id="yesterdayBtn" class="px-4 py-2 border border-gray-300 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50">
                                昨天
                            </button>
                        </div>
                    </div>
                    <div id="riskTrendChart" class="chart-container"></div>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-sm">
                    <h3 class="text-lg font-medium text-gray-800 mb-4">异常指标分布</h3>
                    <div id="abnormalDistChart" class="chart-container"></div>
                </div>
            </section>

            <section class="bg-white p-6 rounded-lg shadow-sm mb-8">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-medium text-gray-800">监测报告生成</h3>
                    <button class="px-4 py-2 bg-primary text-white !rounded-button whitespace-nowrap hover:bg-blue-600 flex items-center">
                        <i class="fas fa-file-alt mr-2"></i>
                        生成报告
                    </button>
                </div>
                <div class="grid grid-cols-2 gap-6">
                    <div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">报告模板</label>
                            <div class="relative">
                                <button class="w-full px-4 py-2 bg-white border border-gray-300 !rounded-button text-left flex items-center justify-between">
                                    <span>综合风险评估报告</span>
                                    <i class="fas fa-chevron-down text-gray-400"></i>
                                </button>
                            </div>
                        </div>
                        <div class="mb-4">
                            <label class="block text-sm font-medium text-gray-700 mb-2">报告描述</label>
                            <textarea class="w-full h-32 px-4 py-2 border border-gray-300 rounded-lg resize-none" placeholder="请输入报告描述..."></textarea>
                        </div>
                    </div>
                    <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
                        <h4 class="text-sm font-medium text-gray-700 mb-3">报告预览</h4>
                        <div class="space-y-3">
                            <p class="text-sm text-gray-600">风险等级：高风险 (Level 3)</p>
                            <p class="text-sm text-gray-600">异常指标：设备温度过高、压力异常、振动超标</p>
                            <p class="text-sm text-gray-600">建议措施：立即停机检修、通知维护人员、启动备用系统</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="bg-white p-6 rounded-lg shadow-sm">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-medium text-gray-800">应急方案管理</h3>
                    <div class="flex space-x-4">
                        <button class="px-4 py-2 border border-gray-300 text-gray-700 !rounded-button whitespace-nowrap hover:bg-gray-50 flex items-center">
                            <i class="fas fa-filter mr-2"></i>
                            筛选
                        </button>
                        <button class="px-4 py-2 bg-primary text-white !rounded-button whitespace-nowrap hover:bg-blue-600 flex items-center">
                            <i class="fas fa-plus mr-2"></i>
                            新建方案
                        </button>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead>
                            <tr class="border-b border-gray-200">
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">方案名称</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">风险等级</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">负责人</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">更新时间</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">状态</th>
                                <th class="px-4 py-3 text-left text-sm font-medium text-gray-600">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="border-b border-gray-200">
                                <td class="px-4 py-4 text-sm text-gray-900">设备过热应急处理方案</td>
                                <td class="px-4 py-4">
                                    <span class="px-2 py-1 text-xs font-medium bg-red-100 text-red-600 rounded-full">高风险</span>
                                </td>
                                <td class="px-4 py-4 text-sm text-gray-600">李明远</td>
                                <td class="px-4 py-4 text-sm text-gray-600">2024-01-15 14:30</td>
                                <td class="px-4 py-4">
                                    <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-600 rounded-full">已启动</span>
                                </td>
                                <td class="px-4 py-4">
                                    <button class="text-primary hover:text-blue-600 mr-3">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="text-gray-400 hover:text-gray-600">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr class="border-b border-gray-200">
                                <td class="px-4 py-4 text-sm text-gray-900">压力异常应急预案</td>
                                <td class="px-4 py-4">
                                    <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-600 rounded-full">中风险</span>
                                </td>
                                <td class="px-4 py-4 text-sm text-gray-600">王海涛</td>
                                <td class="px-4 py-4 text-sm text-gray-600">2024-01-14 09:15</td>
                                <td class="px-4 py-4">
                                    <span class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded-full">待执行</span>
                                </td>
                                <td class="px-4 py-4">
                                    <button class="text-primary hover:text-blue-600 mr-3">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="text-gray-400 hover:text-gray-600">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>
                            <tr class="border-b border-gray-200">
                                <td class="px-4 py-4 text-sm text-gray-900">系统故障快速响应方案</td>
                                <td class="px-4 py-4">
                                    <span class="px-2 py-1 text-xs font-medium bg-orange-100 text-orange-600 rounded-full">中高风险</span>
                                </td>
                                <td class="px-4 py-4 text-sm text-gray-600">陈志强</td>
                                <td class="px-4 py-4 text-sm text-gray-600">2024-01-13 16:45</td>
                                <td class="px-4 py-4">
                                    <span class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-600 rounded-full">已完成</span>
                                </td>
                                <td class="px-4 py-4">
                                    <button class="text-primary hover:text-blue-600 mr-3">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="text-gray-400 hover:text-gray-600">
                                        <i class="fas fa-trash-alt"></i>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>
        </main>
    </div>

    <script>
        // 初始化 ECharts 实例
        const riskTrendChart = echarts.init(document.getElementById('riskTrendChart'));

        // 定义"今天"和"昨天"的数据
        const todayData = [45, 50, 55, 60, 65, 70, 75]; // 今天的数据
        const yesterdayData = [90, 35, 80, 45, 50, 55, 10]; // 昨天的数据

        // 默认显示"今天"的数据
        const riskTrendOption = {
            animation: false,
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'] // 时间轴
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '风险指数',
                type: 'line',
                smooth: true,
                data: todayData,
                areaStyle: {
                    opacity: 0.1
                },
                lineStyle: {
                    color: '#2563eb'
                },
                itemStyle: {
                    color: '#2563eb'
                }
            }]
        };
        riskTrendChart.setOption(riskTrendOption);

        // 切换按钮事件
        document.getElementById('todayBtn').addEventListener('click', () => {
            riskTrendOption.series[0].data = todayData;
            riskTrendChart.setOption(riskTrendOption);
        });

        document.getElementById('yesterdayBtn').addEventListener('click', () => {
            riskTrendOption.series[0].data = yesterdayData;
            riskTrendChart.setOption(riskTrendOption);
        });

        // 异常分布图表
        const abnormalDistChart = echarts.init(document.getElementById('abnormalDistChart'));
        const abnormalDistOption = {
            animation: false,
            tooltip: {
                trigger: 'item'
            },
            series: [{
                name: '异常分布',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '14',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 35, name: '设备温度' },
                    { value: 25, name: '系统压力' },
                    { value: 20, name: '振动指标' },
                    { value: 15, name: '噪音水平' },
                    { value: 5, name: '其他' }
                ]
            }]
        };
        abnormalDistChart.setOption(abnormalDistOption);

        // 窗口大小调整时重新渲染图表
        window.addEventListener('resize', function() {
            riskTrendChart.resize();
            abnormalDistChart.resize();
        });
    </script>
</body>
</html>